<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <title>Title</title>
</head>
<body>
<input id="btn_1" type="button" value="点击显示和影藏"><br/>

<p style="color: red;background-color: burlywood;width: 180px">用于显示和显示的文字</p>

<input id="btn_2" type="button" value="显示"><br/><br/>

<input id="btn_3" type="button" value="影藏"><br/>

<script type="text/javascript">
    $(document).ready(function () {
        $("#btn_1").click(function () {
            $("p").toggle(2000,function () {
                console.log("toggle");
            })
        })

        $("#btn_2").click(function () {
            $("p").show(2000,function () {
                console.log("show");
            })
        })

        $("#btn_3").click(function () {
            $("p").hide(1000,function () {
                console.log("hide");
            })
        })
    })


</script>

</body>

</html>